<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const video = ref(1)

const onChange = () => {
  video.value++
}
const onError = () => {
  showFailToast('操作频繁，请稍后再试')
}
</script>

<template>
  <div class="tool-box-xjj">
    <div class="tool-box-xjj-header">
      <van-nav-bar
        fixed
        :placeholder="true"
        title="高质量小姐姐视频"
        left-arrow
        @click-left="router.go(-1)"
      />
    </div>
    <div class="tool-box-xjj-content">
      <video
        :key="video"
        src="https://api.lolimi.cn/API/xjj/xjj.php"
        controls
        autoplay
        loop
        @error="onError()"
      ></video>
      <div class="tool-box-xjj-content-button">
        <!-- <van-button type="primary" @click="onShare()">分享</van-button> -->
        <van-button type="primary" @click="onChange()" block>换一个</van-button>
      </div>
      <!-- <div class="tool-box-xjj-content-list">
        <div class="tool-box-xjj-content-list-item">
          <van-button type="primary" size="large" @click="">分享</van-button>
        </div>
        <div class="tool-box-xjj-content-list-item">
          <van-button type="primary" size="large" @click="">下载</van-button>
        </div>
      </div> -->
    </div>
  </div>
</template>
<style scoped>
.tool-box-xjj-content {
  width: 100%;
  height: 600px;
}
.tool-box-xjj-content video {
  width: 100%;
  height: 90%;
}
</style>
